<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div class="main">
			<div class="grid-parent">
				<div class="child">
					<img src="./assets/GTA-1.png" alt="" />
				</div>
				<div class="child">
					<img src="./assets/GTA-3.png" alt="" />
				</div>
				<div class="child">
					<img src="./assets/GTA-2.png" alt="" />
				</div>
				<div class="child">
					<img src="./assets/GTA-3.png" alt="" />
				</div>
				<div class="child">
					<img src="./assets/GTA-3.png" alt="" />
				</div>
				<div class="child">
					<img src="./assets/GTA-2.png" alt="" />
				</div>
				<div class="child">
					<img src="./assets/GTA-2.png" alt="" />
				</div>
				<div class="child">
					<img src="./assets/GTA-3.png" alt="" />
				</div>
				<div class="child">
					<img src="./assets/GTA-2.png" alt="" />
				</div>
			</div>
            <div class="g-container"></div>
		</div>
	</body>
	<style>
		.main {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}


		/* 
        整体思路：
        先利用网格布局 分割成四行四列  划分出9*9不规则排列

        再利用
        clip-path 和 放大图像 切割成不规则图形
        */
		.grid-parent {
			width: 500px;
			height: 80vh;
			border: 1px solid #c9b473;
			overflow: hidden;
			display: grid;
            background: #000;
            /* 
            定义了网格的列宽。1fr 表示一个等分的单位，0.7fr 和 0.3fr 则表示按照比例分配的宽度。
            这意味着第一列和第四列将占据相等的空间，第二列约占第一列的 70%，第三列约占第一列的 30%
            */
			grid-template-columns: 1fr 0.7fr 0.3fr 1fr;
            /* 
            定义了网格的行高。分别将网格的高度按比例分为 20%、40%、20%、20%
            */
			grid-template-rows: 20% 40% 20% 20%;
            /* 
            通过给每个网格区域命名来定义网格的布局结构
            第一行，从左到右分别为区域 one 、 two 、 two 、 three 。 依次类推
            */
			grid-template-areas:
				"one two two three"
				"four five five five"
				"six five five five"
				"six seven eight eight";
			& img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: 70% 20%;
				transition: 0.25s;
				cursor: pointer;
				&:hover {
					transform: scale(120%);
				}
			}
		}
		.child {
            &:nth-child(1),
            &:nth-child(2),
            &:nth-child(3){
                img{
                    width:120%;
                    height: 120%;
                }
            }
			&:first-child {
				grid-area: one;
                clip-path: polygon(0% 0%, 93.24% 0%, 105.04% 110.16%, 0% 90%);
			}
			&:nth-child(2) {
				grid-area: two;
                clip-path: polygon(0% 0%, 108.28% 0%, 96.45% 110.13%, 10.55% 110.93%);
			}
			&:nth-child(3) {
				grid-area: three;
                clip-path:polygon(15.05% 0%, 100% 0%, 99.35% 91.7%, 3.08% 108.48%);
              
			}
			&:nth-child(4) {
				grid-area: four;
                clip-path: polygon(0% -0.85%, 106.34% 9.98%, 121.32% 65.63%, 99.66% 109.89%, 1.86% 124.41%);
                img{
                    width: 135%;
                    height: 135%;
                }
			}
			&:nth-child(5) {
				grid-area: five;
                clip-path: polygon(6.4% 6.48%, 47.24% 5.89%, 100% 0%, 98.41% 96.85%, 53.37% 100%, 53% 63.21%, 3.23% 73.02%, 14.30% 44.04%);
			}
			&:nth-child(6) {
				grid-area: six;
                clip-path:  polygon(2.14% 29.3%, 99.34% 15.42%, 98.14% 100.82%, 1.57% 101.2%);
			}
			&:nth-child(7) {
                clip-path: polygon(7.92% 33.47%, 96.31% 23.39%, 95.38% 100%, 5.30% 100.85%);
				grid-area: seven;
			}
			&:nth-child(8) {
                clip-path: polygon(2.5% 22.35%, 100% 0%, 100% 100%, 1.55% 100%);
				grid-area: eight;
			}
			&:nth-child(9) {
                clip-path:polygon(5.94% 28.66%, 100.61% -0.67%, 101.1% 108.57%, 5.4% 126.28%);
                /* 起始行 */
				grid-row-start: 3; 
                /* 终止行 */
				grid-row-end: 4;
                /* 起始列 */
				grid-column-start: 2;
                /* 终止列 */
				grid-column-end: 4;
                img {
                    object-position: 30% 50%;
                    height: 135%;
                }
			}
		}

        /* 
        -  将上述的容器，利用 `clip-path: circle(44px at 44px 44px)` 裁剪成一个圆形；
        -  当 hover 元素的时候，扩大裁剪圆的半径，直到整个图形恢复到整个矩形范围即可
        */
        .g-container {
            position: relative;
            width: 300px;
            height: 300px;
            overflow: hidden;
            transition: clip-path .3s linear;
            clip-path: circle(44px at 44px 44px);
            background: #c9b473;
            &:hover {
                clip-path: circle(460px at 44px 44px);
            }
        }
	</style>
</html>
